<template>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="home-main">
        <!--    banner    -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in swipeData" :key="item.img">
                <img :src="item.img">
            </van-swipe-item>
        </van-swipe>

        <!--    菜单    -->
        <van-grid :column-num="4" class="menus">
            <van-grid-item
                    v-for="item in menusData"
                    :key="item.img"
                    :icon="item.img"
                    :text="item.info[0].value"/>
        </van-grid>

        <!--    公告：内部通过嵌套轮播图来实现    -->
        <van-notice-bar left-icon="fire-o" :scrollable="false">
            <span>热点资讯公告：</span>
            <van-swipe
                    vertical
                    class="notice-swipe"
                    :autoplay="3000"
                    :show-indicators="false"
            >
                <van-swipe-item
                        v-for="(item, index) in newsData"
                        :key="index"
                >
                    {{item.chiild[0].val}}
                </van-swipe-item>
            </van-swipe>
        </van-notice-bar>

        <!--    商品列表    -->
        <van-list
                v-model:loading="state.loading"
                :finished="state.finished"
                finished-text="没有更多了"
                @load="loadProductData"
        >
            <van-grid :column-num="2" class="goods">
                <van-grid-item
                        v-for="product in productData"
                        :key="product.id"
                        :to="{
                            name: 'product',
                            params: {
                              productId: product.id,
                            }
                         }"
                >
                    <img :src="product.image">
                    <p class="description" v-text="product.store_name"></p>
                    <p class="price">￥{{product.price}}</p>
                    <p class="sales"> 已售{{product.sales}}件 </p>
                </van-grid-item>
            </van-grid>
        </van-list>
    </van-pull-refresh>
</template>

<script setup>
  import { getIndexData } from '@/api/home.js'
  import { getProducts } from '@/api/product.js'
  import { ref, computed, reactive } from 'vue'

  // 首页数据
  const indexData = ref({})
  const loadIndexData = async () => {
    const { status, data } = await getIndexData()
    if (status === 200) {
      indexData.value = data
      refreshing.value = false
    }
  }
  loadIndexData()

  // 1 轮播图数据
  const swipeData = computed(() => indexData.value.swiperBg?.default.imgList.list)
  // 2 菜单列表数据
  const menusData = computed(() => indexData.value.menus?.default.imgList.list)
  // 3 公告区域数据
  const newsData = computed(() => indexData.value.news?.default.newList.list)

  // 产品列表数据
  const productData = ref([])
  const state = reactive({
    loading: false,
    finished: false,
    page: 1,
    size: 4,
  })
  const loadProductData = async () => {
    const { status, data } = await getProducts(state.page, state.size)
    if (status === 200) {
      productData.value.push(...data)
      console.log(data.length)
      if (data.length < state.size) {
        state.finished = true
        console.log(state.finished)
      }
      state.page++
    }
    state.loading = false
  }

  // 下拉刷新相关
  const refreshing = ref(false)
  const onRefresh = () => {
    // 1。清空旧数据
    indexData.value = {}
    productData.value = []
    // 2。页码还原
    state.page = 1
    // 3。触底加载的状态还原
    state.loading = false
    state.finished = false
    // 4。重新请求数据
    loadIndexData()
    loadProductData()
  }
</script>

<style lang="scss" scoped>
    .home-main {
        background-color: #f7f7f7;
        margin-top: 50px;
        margin-bottom: 50px;

        .my-swipe img {
            width: 100%;
            height: 170px;
        }

        .menus {
            :deep(.van-icon__image) {
                width: 40px;
                height: 40px;
            }

            :deep(.van-grid-item__text) {
                font-size: 14px;
            }
        }

        .notice-swipe {
            height: 40px;
            line-height: 40px;
        }

        :deep(.van-notice-bar__content) {
            display: flex;
            align-items: center;
        }

        .goods {
            box-sizing: border-box;
            padding-left: 15px;

            :deep(.van-grid-item) {
                margin-top: 15px;
                padding-right: 15px;
                width: 165px;
            }

            :deep(.van-grid-item__content) {
                align-items: flex-start;
                padding: 0;
                border-radius: 10px;
                overflow: hidden;
            }

            img {
                width: 165px;
                height: 165px;
            }

            .description {
                font-size: 14px;
                padding: 5px 8px 0;
                /** 只显示2行文字，多余的显示省略号 */
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .price {
                font-size: 22px;
                font-weight: 700;
                color: #ee3e3e;
                padding-left: 6px;
            }

            .sales {
                font-size: 14px;
                color: #ccc;
                padding-left: 8px;
            }
        }
    }
</style>
